<template>
  <div>
    <el-form :inline="true" ref="formRef">
      <el-form-item>
        <el-button type="primary" @click="editHandle('新增',null)">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="delHandle(null)" :disabled="delBtnStatus">批量删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-input v-model="viewData.search" placeholder="用户名/名称" clearable @clear="clearSearch"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="initData()">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table
        ref="multipleTable"
        :data="viewData.pageData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        stripe
        @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="55"></el-table-column>
      <!--      <el-table-column prop="id" label="用户ID" width="120"></el-table-column>-->
      <el-table-column prop="username" label="用户名" width="120"></el-table-column>
      <el-table-column prop="name" label="用户名称"></el-table-column>
      <el-table-column prop="avatar" label="用户头像">
        <template #default="scope">
          <el-avatar size="large" :src="scope.row.avatar" />
        </template>
      </el-table-column>
      <el-table-column prop="contact" label="联系方式">
        <template #default="scope">
          <el-tag effect="plain" round>{{ scope.row.contact }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template #default="scope">
          <el-tag effect="light" type="danger" round v-if="scope.row.sex === 0">女</el-tag>
          <el-tag effect="light" round v-else>男</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="260">
        <template #default="scope">
          <el-button type="text" @click="repassHandle(scope.row.id, scope.row.username)">重置密码</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button type="text" @click="editHandle('编辑', scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- hide-on-single-page 只有一页时隐藏-->
    <div class="pagination-container">
      <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :total="viewData.total"
          :page-size="viewData.page.size"
          @current-change="handleChangeCurrent"
      />
    </div>

  </div>

  <Edit ref="editRef" :showDialog="editDialog" @closeHandle="closeHandle"></Edit>

</template>

<script setup>
import {ref, reactive} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import { GetList, Delete, Reset} from '@/api/user.js'
import {useStore} from "vuex";
const store = useStore();

const viewData = reactive({
  pageData: [],
  page: {
    current: 1,
    size: 10
  },
  total: 0,
  search: ''
})


const initData = () => {
  const searchForm = ref({
    current: viewData.page.current,
    content: viewData.search
  })
  GetList(searchForm.value).then((res) => {
    res.data.records.forEach(item => item.avatar = store.getters.imageUrl + item.avatar);
    viewData.pageData = res.data.records
    viewData.total = res.data.total;
  })
}
initData()

const clearSearch = () => {
  initData()
}

const handleChangeCurrent = (val) => {
  viewData.page.current = val
  initData()
}

const delHandle = (id) => {

  let ids = [];

  if (id) {
    ids.push(id)
  } else {
    // 批量删除
    ids.push(...selectedIds)
  }

  ElMessageBox.confirm(
      '确认删除该记录吗?', '警告',
      {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning',}
  ).then(() => {
    Delete(ids).then(res => {
      ElMessage({message: '删除成功', type: 'success'})
      initData()
    })
  })
}


const delBtnStatus = ref(true)
let selectedIds = []
const handleSelectionChange = (val) => {
  delBtnStatus.value = val.length === 0
  selectedIds = val.map(item => item.id)
}


import Edit from './edit.vue'

const editDialog = ref(false)
const editRef = ref(null)
const editHandle = (title, id) => {
  editDialog.value = true
  editRef.value.init(title, id)
}

const closeHandle = (hasChange) => {
  editDialog.value = false
  if (hasChange) {
    initData()
  }
  editRef.value.resetForm();
}

const repassHandle = (id, username) => {
  ElMessageBox.confirm(
      '将重置用户【' + username + '】的密码，是否继续？', '警告',
      {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning',}
  ).then(() => {
    Reset(id).then((res) => {
      ElMessage({message: '重置密码成功', type: 'success'})
    })
  })
}
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>